<!DOCTYPE html>
<html>
<head>
<title>Projectile Motion Diagram</title>
<style>
  body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0;}
  canvas { border: 1px solid #ccc; background-color: white; }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="600" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;

// Helper function to draw an arrow (line with a filled arrowhead)
function drawArrow(ctx, fromX, fromY, toX, toY) {
    const headlen = 10;
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    
    // Draw the line
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.stroke();
    
    // Draw the filled arrowhead
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// --- Main Drawing ---

// Define key points and parameters
const oX = 350;
const oY = 280;
const aX = 100;
const aY = 280;
const angle_A = 60; // degrees
const angle_B = 30; // degrees
const angle_A_rad = angle_A * Math.PI / 180;
const angle_B_rad = angle_B * Math.PI / 180;

// 1. Draw the horizontal ground line
ctx.beginPath();
ctx.moveTo(0, oY);
ctx.lineTo(canvas.width, oY);
ctx.stroke();

// 2. Draw points O and A
ctx.beginPath();
ctx.arc(oX, oY, 5, 0, 2 * Math.PI);
ctx.fill();
ctx.font = '22px Arial';
ctx.fillText('O', oX - 7, oY + 28);

ctx.beginPath();
ctx.arc(aX, aY, 5, 0, 2 * Math.PI);
ctx.fill();
ctx.fillText('A', aX - 8, aY + 28);

// 3. Draw the dashed trajectory for ball A
ctx.save();
ctx.lineWidth = 2;
ctx.beginPath();
ctx.setLineDash([6, 4]);
ctx.moveTo(oX, oY);
const ctrlX = (oX + aX) / 2;
const ctrlY = oY - 130;
ctx.quadraticCurveTo(ctrlX, ctrlY, aX, aY);
ctx.stroke();
ctx.restore();

// 4. Draw the velocity vectors from O
const v_len = 80;
const v_endX = oX - v_len * Math.cos(angle_A_rad);
const v_endY = oY - v_len * Math.sin(angle_A_rad);
drawArrow(ctx, oX, oY, v_endX, v_endY);
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('v', (oX + v_endX) / 2 - 25, (oY + v_endY) / 2 + 5);

const v2_len = 150;
const v2_endX = oX + v2_len * Math.cos(angle_B_rad);
const v2_endY = oY - v2_len * Math.sin(angle_B_rad);
drawArrow(ctx, oX, oY, v2_endX, v2_endY);
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('2v', (oX + v2_endX) / 2 + 10, (oY + v2_endY) / 2 - 5);

// 5. Draw the angle arcs and labels
ctx.save();
ctx.lineWidth = 1;
ctx.font = '20px Arial';

// Angle 60°
ctx.beginPath();
// Draw a clockwise arc from 180 degrees to 120 degrees
ctx.arc(oX, oY, 40, Math.PI, (180-angle_A) * Math.PI / 180, false);
ctx.stroke();
ctx.fillText('60°', oX - 75, oY - 25);

// Angle 30°
ctx.beginPath();
// Draw a counter-clockwise arc from 0 to 30 degrees
ctx.arc(oX, oY, 50, 0, angle_B_rad, false);
ctx.stroke();
ctx.fillText('30°', oX + 58, oY - 15);
ctx.restore();

// 6. Draw the distance and time labels (D, T)
const labelY = oY + 50;
ctx.beginPath();
ctx.moveTo(aX, labelY - 5);
ctx.lineTo(aX, labelY + 5);
ctx.moveTo(aX, labelY);
ctx.lineTo(oX, labelY);
ctx.moveTo(oX, labelY - 5);
ctx.lineTo(oX, labelY + 5);
ctx.stroke();
ctx.font = '22px Arial';
ctx.fillText('T, D', (aX + oX) / 2 - 25, labelY + 28);

</script>

</body>
</html>